<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		var statusHeight = STATUSBAR_HEIGHT + 44;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML=".status-bar-height{height:"+statusHeight+"px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
		body{
			background-color: #f4f4f4;
		}
		.weui-panel{
			position: relative;
		}
		.weui-panel .status{
			position: absolute;
			right: 10px;
			top: 15px;
			font-size: 10px;
			background-color: #BD2C00;
			color:#fff;
			padding: 2px 8px;
			border-radius: 3px;
		}
		.weui-media-box__info{
			color: #999;
		}
	</style>

	<body>

		<div id="app">

				<div class="xiaoyi-header header-red" id="header">
					<div class="xiaoyi-header-left"><i class="iconfont icon-back " onclick="wsClose()"></i></div>
					<div class="xiaoyi-header-title">我的账本
					</div>
					<!--<div class="xiaoyi-header-right"><span style="margin: 10px 10px 0 0 ; display: block;" @click="onSubmit">搜索</span></div>-->
				</div>
<div class="status-bar-height"></div>

<template v-for="(vo,index) in items">
	 <div class="weui-panel" style="background-color: #fdffea;" v-if="vo.type==1">
	 	<span class="status">收入</span>
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title" style="color:#ff0000">+ &yen;{{vo.price}}</h4>
            <p class="weui-media-box__desc" style="color: #666;">{{vo.desc}}</p>
            <ul class="weui-media-box__info">
              <li class="weui-media-box__info__meta">{{vo.brief}}</li>
              <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{vo.time}}</li>
            </ul>
          </div>
        </div>
      </div>
    
       <div class="weui-panel" style="background-color: #e3fdd6;" v-else>
       	<span class="status" style="background-color: #41871f;">支出</span>
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title" style="color:#39a503">- &yen;{{vo.price}}</h4> 
            <p class="weui-media-box__desc" style="color: #69845b;">{{vo.desc}}</p>
            <ul class="weui-media-box__info">
              <li class="weui-media-box__info__meta">{{vo.brief}}</li>
              <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{vo.time}}</li>
            </ul>
          </div>
        </div>
      </div>
      

    </template>    


			<template v-if="loading == 'inits'">
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<div class="jushi-loader">Loading...</div>
				</div>
			</template>

			<template v-if="loading == 'nodata'"> 
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<img src="images/nodata.png" style="width: 150px;">
				</div>
			</template>

			<template v-if="loading == 'more'">
				<div class="weui-loadmore">
					<i class="weui-loading"></i>
					<span class="weui-loadmore__tips">加载更多</span>
				</div>
			</template>

			<template v-if="loading == 'more_nodata'">
				<div class="weui-loadmore weui-loadmore_line">
					<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
				</div>
			</template>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				
				var userinfo = getUserInfo();
				var vm = new Vue({
					el: "#app",
					data: {
						userinfo: userinfo,
						items:[],
						loading: 'inits',
						p: 1,
						r: 20 
					},
					mounted: function() {
						this.inits()
					},
					methods: {
						inits: function() {
							
							var vm = this;
							
							Get(SERVER_URL+"&c=Cashbook&a=datalist",{
								p: 1,
								r: vm.r
							},function(data){
									if(data.status){
										vm.items = data.info;
										vm.p = 2;
										if(data.info.length>4){
											vm.loading = 'more'
										}else{
											vm.loading = 'noshow';
										}
										
									}else{
										vm.loading = 'nodata'
									}
							})
							
							var loading = false;
							$(document.body).infinite(150).on("infinite", function() {  
								if(loading) return;
								loading = true;

								Get(SERVER_URL +"&c=Cashbook&a=datalist",{
									p: vm.p,
									r: vm.r
								}, function(data) {
									if(data.status) {
										for(var i in data.info) { 
											vm.items.push(data.info[i]);
										}
										vm.p++;
										loading = false; 
									} else {
										vm.loading = 'more_nodata';
										loading = false;
									}

								})

							});
						}
					}
				});
				
			});

			
		</script>
	</body>

</html>